<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        *{margin:0;padding:0;}
        div{
            width: 1200px;
            margin:10px auto 0;
            border:1px solid red;
            height:300px;
            overflow: hidden;
        }
        ul{
            width: 10000px;
        }
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            height:300px;
            cursor: pointer;
        }
    </style>
    <script src="lib/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $lis = $('div li');
            //当鼠标移到某个图片上时，该图片所在li变为最大宽，其他的变为最小宽
            $lis.mouseover(function(){
                $(this).stop(true).animate({width:500},1000).siblings().stop(true).animate({width:140},1000);
            }).mouseout(function(){ //鼠标离开时，将所有图片所在li变为默认宽
                $lis.stop(true).animate({width:200},1000);
            });

        })
    </script>
</head>
<body>
    <div>
        <ul>
            <li><img src="images/28/01.jpg" alt=""></li>
            <li><img src="images/28/02.jpg" alt=""></li>
            <li><img src="images/28/03.jpg" alt=""></li>
            <li><img src="images/28/04.jpg" alt=""></li>
            <li><img src="images/28/05.jpg" alt=""></li>
            <li><img src="images/28/06.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>